<template>
  <div class="login-container">
    <el-tabs v-model="activeName" type="border-card" class="login-tabs" stretch>
      <el-tab-pane label="用户登陆" name="login">
        <el-form
          ref="loginForm"
          :model="user"
          status-icon
          :rules="rules"
          class="login-form"
        >
          <el-form-item label="用户名" prop="username">
            <el-input type="text" v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="user.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('loginForm')"
              >登录</el-button
            ><br />
            <a href="http://localhost:8080/#/register">立即注册</a>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import api from "../../api";
import jwt from "jwt-decode";
import { mapMutations } from "vuex";

export default {
  name: "Login",
  data() {
    var validateUsername = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入用户名"));
      }
      if (value.length < 2) {
        callback(new Error("长度不够"));
      }
      callback();
    };
    var validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      }
      callback();
    };
    return {
      activeName: "login",
      user: {
        username: "",
        password: "",
      },
      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
      },
    };
  },
  methods: {
    ...mapMutations("loginModule", ["setUser"]),
    // 登陆按钮
    submitForm() {
      if (this.activeName === "login") {
        // 登陆
        console.log(this.user.username, this.user.password);
      }
      api
        .getHostLogin({
          username: this.user.username,
          password: this.user.password,
        })
        .then((res) => {
          if (res.status === 200) {
            this.setUser({
              username: jwt(res.data).username,
              token: res.data,
            });
            console.log(res);
            // 写入本地数据
            localStorage.setItem("weddingIndex", this.user.username);
            this.$router.push("/");
          } else {
            api
              .getNewLogin({
                username: this.user.username,
                password: this.user.password,
              })
              .then((res) => {
                if (res.status === 200) {
                  this.setUser({
                    username: jwt(res.data).username,
                    token: res.data,
                  });
                  console.log(res);
                  // 写入本地数据
                  localStorage.setItem("weddingIndex", this.user.username);
                  this.$router.push("/");
                } else {
                  api
                    .getPlannerLogin({
                      username: this.user.username,
                      password: this.user.password,
                    })
                    .then((res) => {
                      if (res.status === 200) {
                        this.setUser({
                          username: jwt(res.data).username,
                          token: res.data,
                        });
                        console.log(res);
                        // 写入本地数据
                        localStorage.setItem("weddingIndex", this.user.username);
                        this.$router.push("/");
                      } else {
                        api
                          .getCompanyLogin({
                            username: this.user.username,
                            password: this.user.password,
                          })
                          .then((res) => {
                            if (res.status === 200) {
                              this.setUser({
                                username: jwt(res.data).username,
                                token: res.data,
                              });
                              console.log(res);
                              // 写入本地数据
                              localStorage.setItem("weddingIndex", this.user.username);
                              this.$router.push("/");
                            }
                          });
                      }
                    });
                }
              });
          }
        }).catch((error) => {
        this.$message({
          message: error.data.errors,
          type: "error",
        });
      });
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
.login-container {
  width: 500px;
  margin: 0 auto;
  margin-top: 100px;
  .login-form {
    padding: 40px 40px;
  }
  h3 {
    margin-top: 20px;
  }
  .login-tabs {
    border-radius: 5px;
  }
}
</style>